<template>
    <div class="default-main">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.payment.config.Payment')" name="payment">
                        <el-form @keyup.enter="onSubmitPayment()" :model="state.payment" label-position="top" :label-width="200">
                            <FormItem
                                :label="t('xmwechat.payment.config.MchId')"
                                type="string"
                                v-model="state.payment.mch_id"
                                prop="mch_id"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.MchId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.SecretKey')"
                                type="string"
                                v-model="state.payment.secret_key"
                                prop="secret_key"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.SecretKey') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.NotifyUrl')"
                                type="string"
                                v-model="state.payment.notify_url"
                                prop="notify_url"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.NotifyUrl') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.Certificate')"
                                type="string"
                                v-model="state.payment.certificate"
                                prop="certificate"
                                :attr="{
                                    blockHelp: '请填写证书路径',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.Certificate') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.PrivateKey')"
                                type="string"
                                v-model="state.payment.private_key"
                                prop="private_key"
                                :attr="{
                                    blockHelp: '请填写证书路径',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.PrivateKey') })"
                            />
                            <el-button v-blur :loading="state.payment.loading" @click="onSubmitPayment()" type="primary">
                                {{ t('Save') }}
                            </el-button>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
            <el-col :span="12">
                <el-collapse class="collapse" v-model="state.collapseActiveName">
                    <el-collapse-item class="collapse-item" :title="t('xmwechat.payment.config.partnerPayment')" name="partnerPayment">
                        <el-form @keyup.enter="onSubmitPartnerPayment()" :model="state.partnerPayment" label-position="top" :label-width="200">
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerAppId')"
                                type="string"
                                v-model="state.partnerPayment.sp_appid"
                                prop="sp_appid"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerAppId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerMchId')"
                                type="string"
                                v-model="state.partnerPayment.sp_mchid"
                                prop="sp_mchid"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerMchId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerSecretKey')"
                                type="string"
                                v-model="state.partnerPayment.secret_key"
                                prop="secret_key"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerSecretKey') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerSubMchId')"
                                type="string"
                                v-model="state.partnerPayment.sub_mchid"
                                prop="sub_mchid"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerSubMchId') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerNotifyUrl')"
                                type="string"
                                v-model="state.partnerPayment.notify_url"
                                prop="notify_url"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerNotifyUrl') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerRefundsNotifyUrl')"
                                type="string"
                                v-model="state.partnerPayment.refunds_notify_url"
                                prop="refunds_notify_url"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerRefundsNotifyUrl') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerCertificate')"
                                type="string"
                                v-model="state.partnerPayment.certificate"
                                prop="certificate"
                                :attr="{
                                    blockHelp: '请填写证书路径',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerCertificate') })"
                            />
                            <FormItem
                                :label="t('xmwechat.payment.config.partnerPrivateKey')"
                                type="string"
                                v-model="state.partnerPayment.private_key"
                                prop="private_key"
                                :attr="{
                                    blockHelp: '请填写证书路径',
                                }"
                                :placeholder="t('Please input field', { field: t('xmwechat.payment.config.partnerPrivateKey') })"
                            />
                            <el-button v-blur :loading="state.partnerPayment.loading" @click="onSubmitPartnerPayment()" type="primary">
                                {{ t('Save') }}
                            </el-button>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { getConfig, saveConfig } from '/@/api/backend/xmwechat/payment/config'
import FormItem from '/@/components/formItem/index.vue'
import { useI18n } from 'vue-i18n'
import { ElNotification } from 'element-plus'

const { t } = useI18n()
const state = reactive({
    collapseActiveName: ['payment', 'partnerPayment'],
    payment: {
        loading: false,
        mch_id: '',
        secret_key: '',
        notify_url: '',
        certificate: '',
        private_key: '',
    },
    partnerPayment: {
        loading: false,
        sp_mchid: '',
        sp_appid: '',
        sub_mchid: '',
        secret_key: '',
        notify_url: '',
        refunds_notify_url: '',
        certificate: '',
        private_key: '',
    },
})

const onSubmitPayment = () => {
    state.payment.loading = true
    saveConfig('payment', state.payment).finally(() => {
        state.payment.loading = false
    })
}

const onSubmitPartnerPayment = () => {
    state.partnerPayment.loading = true
    saveConfig('partnerPayment', state.partnerPayment).finally(() => {
        state.partnerPayment.loading = false
    })
}

const init = () => {
    getConfig()
        .then((res) => {
            let result = res.data
            state.payment.mch_id = result.payment.mch_id
            state.payment.secret_key = result.payment.secret_key
            state.payment.notify_url = result.payment.notify_url
            state.payment.certificate = result.payment.certificate
            state.payment.private_key = result.payment.private_key

            state.partnerPayment.sp_mchid = result.partnerPayment.sp_mchid
            state.partnerPayment.sp_appid = result.partnerPayment.sp_appid
            state.partnerPayment.sub_mchid = result.partnerPayment.sub_mchid
            state.partnerPayment.secret_key = result.partnerPayment.secret_key
            state.partnerPayment.notify_url = result.partnerPayment.notify_url
            state.partnerPayment.certificate = result.partnerPayment.certificate
            state.partnerPayment.private_key = result.partnerPayment.private_key
            state.partnerPayment.refunds_notify_url = result.partnerPayment.refunds_notify_url
        })
        .catch((e) => {
            ElNotification({
                type: 'error',
                message: e,
            })
        })
}
init()
</script>

<style scoped lang="scss">
.collapse {
    //width: 50%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--el-border-radius-base);
    background-color: var(--ba-bg-color-overlay);
}

.collapse-item :deep(.el-collapse-item__content) {
    padding-bottom: 15px;
}

@media screen and (max-width: 1024px) {
    .collapse {
        width: 100% !important;
    }
}

.note {
    color: #a8abb2;
    font-size: 12px;
}
</style>
